<template>

     <!-- 需要设置visible属性，它接收Boolean，当为true时显示 Dialog -->
     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->

    <el-dialog
      title="添加字典"
      :visible.sync="dialogVisible"
      width="50%">

      <!-- :model 将数据form赋值给表单内组件 -->
      <el-form ref="ruleForm" :model="form" label-width="80px" style="margin-top: 30px;" :rules="rules">
        <el-form-item label="业务类型" prop="bsName">
          <el-input v-model="form.bsName" placeholder="请输入业务类型"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入联系方式"></el-input>
        </el-form-item>

        <el-form-item label="图标1" prop="icon1">
          <div class="row">
             <el-input v-model="form.icon1" placeholder="请输入图标1"></el-input>
             <MyFileUpload @uploadFileSuccess="onIconUpLoadSuccess"/>
          </div>
        </el-form-item>

        <el-form-item label="图标2" prop="icon2">
          <div class="row">
            <el-input v-model="form.icon2" placeholder="请输入图标2"></el-input>
            <MyFileUpload @uploadFileSuccess="onIcon2UpLoadSuccess"></MyFileUpload>

            <!-- <el-upload
              class="upload-demo"
              :action="uploadHostStr"
              :on-remove="handleRemoveIcon2"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :on-success="handleSuccessIcon2">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload -->

          </div>

        </el-form-item>

        <el-form-item label="语言" prop="language">
            <el-select v-model="form.language" placeholder="请选择语言">
                <el-option
                  v-for="item in languageList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>

        </el-form-item>

        <!-- <div>你选择了{{language}}</div> -->

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>

    </el-dialog>


</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { addDic } from '@/api/system/dict2/type';

      import { uploadHost } from '../../../../api/UploadHost';
      import MyFileUpload from "@/components/MyFileUpload/index.vue";

import { Icon } from 'element-ui';

      export default{
        components:{MyFileUpload},

        data(){
          return{
            uploadHostStr:'',
            dialogVisible:false,
            languageList:[
                {
                  "label":"中文",
                  "value":"zh"
                },
                {
                  "label":"英语",
                  "value":"en"
                },
                {
                  "label":"法语",
                  "value":"fr"
                },
                {
                  "label":"日语",
                  "value":"ja"
                }
            ],
            fileList:[],

            // 表单数据
            form: {
                  bsName:'',
                  name:'',
                  contact:'',
                  language:'',
                  icon1:'',
                  icon2:''
            },
            rules:{
                bsName: [{ required: true, message: '请输入业务名称', trigger: 'blur' }],
                label: [{ required: true, message: '请输入键', trigger: 'blur' }],
                value: [{ required: true, message: '请输入值', trigger: 'blur' }]

            }

          }
        },
        created(){
           this.uploadHostStr = uploadHost();
           console.log('文件上传---',this.uploadHostStr)

        },
        methods:{
          onIconUpLoadSuccess(url){
             this.form.icon1=url;
          },
          onIcon2UpLoadSuccess(url){
            this.form.icon2=url;
          },

          showDialog(){
            this.dialogVisible=true;
          },
          submitForm(formName){
              this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.addForm();

                          // alert('submit!');
                        } else {
                          // alert('error submit!!');
                          return false;
                        }
              });
          },
          addForm(){
              addDic(this.form).then(response => {
                console.log(response);
                this.dialogVisible=false;
                // 给父组件发送事件
                this.$emit('custom-event');

              });
          }

        }


      }
</script>

<style scoped>
  .line_image{
      display: flex;
      flex-direction: row;

  }
  .line_image_margin{
      display: flex;
      flex-direction: row;
      margin-top: 30px;
  }
  .line_image_lable{
      width: 70px;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
  }
  .upload-demo{
      margin-left: 15px;

  }
  .image_label{
      color: #666666;
  }
  .row{
    display: flex;
    flex-direction: row;
  }

</style>

